<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script>
</head>
<body>


<div class="container-fluid">


    <%--用户注册--%>
    <div class="row" style="margin-top: 70px;">
        <div class="col-sm-4 col-sm-offset-4">
            <h1 class="text-center">用户注册</h1>
        </div>
    </div>

    <%--完成表单--%>
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4">

            <form id="regForm">
                <div class="form-group">
                    <label for="name">用户名:</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="请输入用户名...">
                </div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码...">
                </div>
                <div class="form-group">
                    <label for="role">角色选择:</label>
                    <select name="role" class="form-control" id="role">
                        <option value="admin">管理员</option>
                        <option value="student">学生</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="code">验证码:</label>
                    <div>
                        <input type="text" name="code" class="form-control" style="height:48px;width: 50%;float: left;" id="code" placeholder="请输入验证码....">
                        <%--验证的图片不是一张静态固定图片。该图片其实是由后台代码进行随机生成的
                        通过src中的属性值，发送一个获取验证码图片的请求。然后由后台请求去处理。
                        调用对应的生成验证码的工具，返回一个随机的验证码图片。并响应传输给前端进行展示
                        --%>
                        <img src="${pageContext.request.contextPath}/user/getImage" id="image" style="height:48px;float: right;" alt="">
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" id="regBtn" class="btn btn-danger" style="margin-top:20px;width: 30%;margin-left: 10px;">立即注册</button>
                <a href="${pageContext.request.contextPath}/back/login.jsp" class="btn btn-info" style="margin-top:20px;width: 30%;margin-left: 30px;">返回登录</a>
            </form>

        </div>
    </div>

</div>

</body>
</html>
<script>
    //定义文档就绪函数
    $(function () {
        //获取图片标签的节点对象，为其绑定单击事件
        $("#image").click(function () {
           // alert("我触发了单击事件");
            //当触发单击时间时，重新使该图片发送一个新的请求，生成一个新验证码图片
            /*为什么在单击图片的时候，没有重新的访问获取随机验证码图片的请求
            为了防止每一次请求的路径一样，导致在发送请求的时候，没有真正的去执行控制器层的代码。
            我们可以为当前发送的请求路径添加一个随机值，使每一次发送的请求路径都不一样。
            * */
            $("#image").attr("src","${pageContext.request.contextPath}/user/getImage?id="+Math.random());
        });


        /*为立即注册按钮绑定单击事件，触发ajax请求
        * */
        $("#regBtn").click(function () {
            //发送ajax请求
            $.post("${pageContext.request.contextPath}/user/regist",$("#regForm").serialize(),function (rs) {
                if (rs.status){
                    alert(rs.message+"点击确定进行跳转！");
                    location.href="${pageContext.request.contextPath}/back/login.jsp"
                } else{
                    alert(rs.message);
                }
            });
        });

    })

</script>